<template>
  <i-biz-control-base :controller="c" :class="controlClass">
    <template v-if="!!state.isCreated">
      <i-biz-tabbar :modelValue="activeName" @change="onTabChange">
        <template v-for="menu in model.appMenuItems" :key="menu.id">
          <i-biz-tabbar-item
            v-if="
              menu.hidden !== true &&
              menu.itemType === 'MENUITEM' &&
              state.menuItemsState[menu.id].visible
            "
            :name="menu.id"
            :title="menu.caption"
          >
            <template #icon>
              <i-biz-icon :icon="menu.sysImage" :class="ns.e('icon')" />
            </template>
          </i-biz-tabbar-item>
        </template>
      </i-biz-tabbar>
    </template>
  </i-biz-control-base>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  }
}
</script>
<script setup lang="ts">
import { computed, onMounted, PropType, ref } from "vue";
import { IAppMenu } from "@ibiz/model-core";
import { useControlController, useNamespace } from "@/use";
import {
  AppMenuController,
  IMobMDCtrlRowState,
  MDCtrlController,
  ViewMode,
} from "@ibiz-template/runtime";

const props = defineProps({
  modelData: { type: Object as PropType<IAppMenu>, required: true },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
});

const c = useControlController((...args) => new AppMenuController(...args));

const { state, model } = c;
const ns = useNamespace(`control-${model.controlType!.toLowerCase()}`);

const controlClass = computed(() => {
  const { sysCss, codeName } = model;
  return [ns.b(), ns.e(codeName), sysCss];
});

const activeName = ref();

const onTabChange = async (
  active: string,
  event?: MouseEvent,
) => {
  activeName.value = active;
  const opts = {
    routeMode: ViewMode.EMBED
  }
  await c.onClickMenuItem(active, event, true, opts);
};

onMounted(async () => {
  const allItems = c.getAllItems();
  // 默认激活的菜单项
  const defaultActiveMenuItem = allItems.find((item) => {
    return item.openDefault && !item.hidden;
  });
  if (defaultActiveMenuItem) {
    onTabChange(defaultActiveMenuItem.id!, undefined);
  }
});
</script>
<style lang="scss">
@import "./i-biz-app-menu-control.scss";
</style>
